<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            display: flex;
        }
        .big{
            display: none;
            position: absolute;
            left: 370px;
            top: 10px;
            overflow: hidden;
            width: 400px;
            height: 350px;
        }
        #x{
            width: 400px;
            height: 350px;
        }
        .small{
            width: 200px;
            height: 125px;
            position: relative;
        }
        #bigImg{
            width: 400px;
            height: 600px;
            overflow: hidden;
            position: absolute;
        }
        .mask{
            width: 200px;
            height: 200px;
            background-color: rgba(220, 225, 117, 0.7);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box" class="box">
        <div class="small" id="smallBox">
            <img src="../images/Lappland.jpg" id="x">
            <div class="mask" id="mask"></div>
        </div>
        <div class="big" id="bigBox">
            <img src="../images/lappland.jpg" id="bigImg">
        </div>
    </div>
    <script>
        function $(id) {
            return document.getElementById(id);
        }
        $("smallBox").onmouseover=function(e){
            $("bigBox").style.display="block";
            $("mask").style.display="block";
        }
        $("smallBox").onmouseout=function(e){
            $("bigBox").style.display="none";
            $("mask").style.display="none";
        }
        $("smallBox").onmouseover=function(event){
            var event=event||window.event;
            var pageX=event.pageX;
            var pageY=event.pageY;
            //box盒子的左边框距离当前鼠标点击的距离
            var boxX=pageX-$('box').offsetLeft;
            var boxY=pageY-$('box').offsetTop;
            //计算遮罩层的位置
            var maskX=boxX-$("mask").offsetWidth/2;
            var maskY=boxY-$("mask").offsetHeight/2;
            //修正遮罩层的位置
            if(maskX<0)maskX=0;
            if(maskX>$('smallBox').offsetWidth-$("mask").offsetWidth)
               maskX=$('smallBox').offsetWidth-$("mask").offsetWidth
            if(maskY<0) maskY=0;
            if(maskY>$('smallBox').offsetHeight-$("mask").offsetHeight)
               maskY=$('smallBox').offsetHeight-$("mask").offsetHeight
            //设置遮罩层的位置
            $("mask").style.top=maskY+"px";
            $("mask").style.left=maskX+"px";
            //放大
            var bigImgMove=$("bigImg").offsetWidth-$("bigBox").offsetWidth;
            var maskMove=$("smallBox").offsetWidth-$("mask").offsetWidth;
            var rate=bigImgMove/maskMove;
            console.log(rate,rate*maskY,rate*maskX)
            $("bigImg").style.top=-rate*maskY+"px";
            $("bigImg").style.left=-rate*maskX+"px";
        }
    </script>
</body>
</html>